<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>场地管理</el-breadcrumb-item>
			<el-breadcrumb-item>场地列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
			<!-- 搜索 添加 -->
			<el-row :gutter="20">
				<el-col :span="6">
					<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getSiteList">
						<el-button slot="append" icon="el-icon-search" @click="getSiteList"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addDialogVisible = true">添加场地</el-button>
				</el-col>
			</el-row>
			<!-- 用户列表区域 -->
			<el-table :data="siteList" border stripe>
				<!-- stripe: 斑马条纹
				border：边框-->
				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column prop="siteType" label="场地类型"></el-table-column>
				<el-table-column prop="siteNumber" label="场地编号"></el-table-column>
				<el-table-column prop="chargeStandards" label="收费标准"></el-table-column>
				<el-table-column prop="remarks" label="备注"></el-table-column>
				<el-table-column label="使用状态">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button
								type="primary"
								icon="el-icon-edit"
								size="mini"
								circle
								@click="showEditDialog(scope.row.id)"
						></el-button>
						<el-button
								type="danger"
								icon="el-icon-delete"
								size="mini"
								circle
								@click="removeUserById(scope.row.id)"
						></el-button>
						<el-tooltip
								class="item"
								effect="dark"
								content="角色分配"
								:enterable="false"
								placement="top"
						>
							<el-button
									type="warning"
									icon="el-icon-setting"
									size="mini"
									circle
									@click="showSetRole(scope.row)"
							></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="queryInfo.current"
					:page-sizes="[2, 5, 10, 15]"
					:page-size="queryInfo.pagesize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
			></el-pagination>
		</el-card>
		<!-- 添加用户的对话框 -->
		<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
			<!-- 内容主体 -->
			<el-form
					:model="addSiteForm"
					ref="addUserFormRef"
					label-width="100px"
			>
				<el-form-item label="场地类型" prop="username">
					<el-input v-model="addSiteForm.siteType"></el-input>
				</el-form-item>
				<el-form-item label="场地编号" prop="password">
					<el-input v-model="addSiteForm.siteNumber"></el-input>
				</el-form-item>
				<el-form-item label="收费标准" prop="email">
					<el-input v-model="addSiteForm.chargeStandards"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="mobile">
					<el-input v-model="addSiteForm.remarks"></el-input>
				</el-form-item>
				<el-form-item label="使用状态" prop="mobile">
					<el-switch v-model="addSiteForm.state"  active-value="1"
										 inactive-value="0"></el-switch>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSite">确 定</el-button>
      </span>
		</el-dialog>

		<!-- 修改用户的对话框 -->
		<el-dialog
				title="修改场地信息"
				:visible.sync="editDialogVisible"
				width="50%"
				@close="editDialogClosed"
		>
			<!-- 内容主体 -->
			<el-form
					:model="editUserForm"
					ref="editUserFormRef"
					label-width="70px"
			>
				<el-form-item label="场地类型" prop="username">
					<el-input v-model="addSiteForm.siteType"></el-input>
				</el-form-item>
				<el-form-item label="场地编号" prop="password">
					<el-input v-model="addSiteForm.siteNumber"></el-input>
				</el-form-item>
				<el-form-item label="收费标准" prop="email">
					<el-input v-model="addSiteForm.chargeStandards"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="mobile">
					<el-input v-model="addSiteForm.remarks"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSite">确 定</el-button>
      </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "Site",
		data() {
			return {
				// 获取用户列表查询参数对象
				queryInfo: {
					content: '',
					// 当前页数
					current: 1,
					// 每页显示多少数据
					size: 10
				},
				siteList: [],
				total: 0,
				// 添加用户对话框
				addDialogVisible: false,
				// 用户添加
				addSiteForm: {
					siteType: '',
					siteNumber: '',
					chargeStandards: '',
					remarks: '',
					state:''
				},
				// 修改用户
				editDialogVisible: false,
				editUserForm: {},
			}
		},
		created() {
			this.getSiteList()
		},
		methods: {
			async getSiteList() {
				const res = await this.$http.get('/site/findAllSite', {
					params: this.queryInfo
				})
				if (res.status !== 200) {
					return this.$message.error('获取用户列表失败！')
				}
				this.siteList = res.data.list
				this.total = res.data.total
			},
			// 监听 pagesize改变的事件
			handleSizeChange(newSize) {
				// console.log(newSize)
				this.queryInfo.size = newSize
				this.getSiteList()
			},
			// 监听 页码值 改变事件
			handleCurrentChange(newSize) {
				// console.log(newSize)
				this.queryInfo.current = newSize
				this.getSiteList()
			},
			// 监听 switch开关 状态改变
			async userStateChanged(userInfo) {
				// console.log(userInfo)
				const {data: res} = await this.$http.put(
					`users/${userInfo.id}/state/${userInfo.mg_state}`
				)
				if (res.meta.status !== 200) {
					userInfo.mg_state = !userInfo.mg_state
					return this.$message.error('更新用户状态失败')
				}
				this.$message.success('更新用户状态成功！')
			},
			// 监听 添加用户对话框的关闭事件
			addDialogClosed() {
				this.$refs.addUserFormRef.resetFields()
			},
			// 添加用户
			async addSite() {
					const res = await this.$http.post('/site/addSite',this.addSiteForm)
					if (res.status !== 200) {
						this.$message.error('添加用户失败！')
					}
					this.$message.success('添加用户成功！')
					// 隐藏添加用户对话框
					this.addDialogVisible = false
					this.getSiteList()

			},
			// 编辑用户信息
			async showEditDialog(id) {
				const {data: res} = await this.$http.get('users/' + id)
				if (res.meta.status !== 200) {
					return this.$message.error('查询用户信息失败！')
				}
				this.editUserForm = res.data
				this.editDialogVisible = true
			},
			// 监听修改用户对话框的关闭事件
			editDialogClosed() {
				this.$refs.editUserFormRef.resetFields()
			},
			// 修改用户信息
			editSite() {
				// 提交请求前，表单预验证
				this.$refs.editUserFormRef.validate(async valid => {
					// console.log(valid)
					// 表单预校验失败
					if (!valid) return
					const {data: res} = await this.$http.put(
						'users/' + this.editUserForm.id,
						{
							email: this.editUserForm.email,
							mobile: this.editUserForm.mobile
						}
					)
					if (res.meta.status !== 200) {
						this.$message.error('更新用户信息失败！')
					}
					// 隐藏添加用户对话框
					this.editDialogVisible = false
					this.$message.success('更新用户信息成功！')
					this.getSiteList()
				})
			},
			// 删除用户
			async removeUserById(id) {
				const confirmResult = await this.$confirm(
					'此操作将永久删除该用户, 是否继续?',
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).catch(err => err)
				// 点击确定 返回值为：confirm
				// 点击取消 返回值为： cancel
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				const {data: res} = await this.$http.delete('users/' + id)
				if (res.meta.status !== 200) return this.$message.error('删除用户失败！')
				this.$message.success('删除用户成功！')
				this.getSiteList()
			},
			// 展示分配角色的对话框
			async showSetRole(role) {
				this.userInfo = role
				// 展示对话框之前，获取所有角色列表
				const {data: res} = await this.$http.get('roles')
				if (res.meta.status !== 200) {
					return this.$message.error('获取角色列表失败！')
				}
				this.rolesLsit = res.data
				this.setRoleDialogVisible = true
			},
			// 分配角色
			async saveRoleInfo() {
				if (!this.selectRoleId) {
					return this.$message.error('请选择要分配的角色')
				}
				const {data: res} = await this.$http.put(`users/${this.userInfo.id}/role`, {rid: this.selectRoleId})
				if (res.meta.status !== 200) {
					return this.$message.error('更新用户角色失败！')
				}
				this.$message.success('更新角色成功！')
				this.getSiteList()
				this.setRoleDialogVisible = false
			},
			// 分配角色对话框关闭事件
			setRoleDialogClosed() {
				this.selectRoleId = ''
				this.userInfo = {}
			}
		}

	}
</script>

<style scoped>

</style>
